<template>
    <div class="sidebar-container">
        <el-menu :default-active="activeSection" class="sidebar" @select="handleSelect" collapse-transition
            :collapse="isCollapsed" background-color="#ffffff" text-color="#333333" active-text-color="#409eff">
            <el-menu-item index="user">
                <template #title>
                    <User class="icon" />
                    <span>用户管理</span>
                </template>
            </el-menu-item>
            <el-menu-item index="book">
                <template #title>
                    <Reading class="icon" />
                    <span>书籍管理</span>
                </template>
            </el-menu-item>
            <el-menu-item index="product">
                <template #title>
                    <Goods class="icon" />
                    <span>商品管理</span>
                </template>
            </el-menu-item>
            <el-menu-item index="article">
                <template #title>
                    <Document class="icon" />
                    <span>文章管理</span>
                </template>
            </el-menu-item>
            <el-menu-item index="restaurant">
                <template #title>
                    <House class="icon" />
                    <span>餐厅管理</span>
                </template>
            </el-menu-item>
        </el-menu>
    </div>
</template>

<script setup lang="ts">
import { defineEmits, ref } from 'vue';
import { User, Reading, Goods, Document, House } from '@element-plus/icons-vue';



const emit = defineEmits();
const activeSection = ref('user');

const handleSelect = (index: string) => {
    activeSection.value = index;
    emit('select', index); // 发送事件到父组件
};


</script>

<style scoped>
.sidebar-container {
    width: 250px;
    height: 100vh;
    background-color: #f9f9f9;
    padding: 20px 0;
    border-right: 1px solid #e5e5e5;
}

.sidebar {
    width: 100%;
    border: none;
}

.el-menu-item {
    display: flex;
    align-items: center;
    padding-left: 20px;
}

.icon {
    width: 24px;
    /* 设置图标宽度 */
    height: 24px;
    /* 设置图标高度 */
    margin-right: 12px;
    color: #333333;
}

.el-menu-item:hover {
    background-color: #e6f7ff;
}
</style>